<template>

  <div>
    <!-- 操作按钮区域 -->
    <div class="table-operator" style="flex:1;text-align: right;margin-bottom:10">
      <a-button @click="handleAdd" type="primary" icon="plus">新建任务</a-button>
      <a-button @click="handleAdd1" type="primary" icon="plus">快速发布</a-button>

    </div>


    <a-tabs :activeKey="activeKey" @change="tabChange" type="card">
      <a-tab-pane key="1" tab="我的待办"></a-tab-pane>
      <a-tab-pane key="2" tab="已编辑"></a-tab-pane>
      <a-tab-pane v-if="role==='1428128971472330754'" key="5" tab="已审核"></a-tab-pane>

      <a-tab-pane key="3" tab="同步可见"></a-tab-pane>
      <a-tab-pane key="4" tab="已办结"></a-tab-pane>

    </a-tabs>
    <!-- <a-button style="float: right; margin-top: -47px" @click="handleBin">回收站</a-button> -->
    <a-spin :spinning="loading">
      <a-empty v-if="!loading&&dataSource.length===0"></a-empty>
      <div class="item" v-for="(item) in dataSource" :key="item.id">
        <div class="item-title">内容名称：{{item.contentName}}
          <a-popover title='历史标题' trigger='click' @click='getTitleChangeHistory(item.taskNo)'>
            <template #content>
              <a-table :columns='columns' :dataSource='titleChangeHistory'>
<!--                <template slot="operation" slot-scope="text, record">-->
<!--                  <a-button @click="handleOperation(record)">恢复</a-button>-->
<!--                </template>-->
              </a-table>
            </template>
            <a-icon style="cursor: pointer;margin-right: 7px" type='history' theme='outlined' />
          </a-popover>
          <a-tag color="orange" v-if="item.urgencyLevel==0">一般</a-tag>
          <a-tag color="pink" v-else-if="item.urgencyLevel==1">重要</a-tag>
          <a-tag color="red" v-else-if="item.urgencyLevel==2">紧急</a-tag>
        </div>
        <div class="item-content">
          <img class="item-icon" :src="item.banner||defaultImg">
          <div style="flex:1">
            <div class="item-content-title">任务名称：{{item.taskName}}</div>
            <a-row v-if="item.childName">
              <a-col class="item-flex">
                <div class="item-label">当前节点</div>
                <div class="item-value">{{item.childName}}</div>
              </a-col>
            </a-row>
            <a-row>
              <a-col class="item-flex" :span="8">
                <div class="item-label">任务类型</div>
                <div class="item-value">{{item.taskType==0?'文章':'活动'}}</div>
              </a-col>
              <a-col class="item-flex" :span="12">
                <div class="item-label">任务编码</div>
                <div class="item-value">{{item.taskNo}}</div>
              </a-col>
            </a-row>
            <a-row>
              <a-col class="item-flex" :span="8">
                <div class="item-label">作 者</div>
                <div class="item-value">{{item.createBy}}</div>
              </a-col>
              <a-col class="item-flex" :span="12">
                <div class="item-label">创建时间</div>
                <div class="item-value">{{item.createTime}}</div>
              </a-col>
            </a-row>
            <a-row>
              <a-col v-if="item.upateTime" class="item-flex" :span="8">
                <div class="item-label">更新时间</div>
                <div class="item-value">{{item.upateTime}}</div>
              </a-col>
              <a-col class="item-flex" :span="8">
                <div class="item-label">任务截止时间</div>
                <div class="item-value">{{item.endTime||'无截止时间'}}</div>
              </a-col>
            </a-row>
            <div>
              <span @click="handleTask(item)" class="item-button">
                {{activeKey=='1'?'处理':'查看'}}
                <a-icon type="eye" theme="twoTone"/>
              </span>
              <span @click="backTask(item)" class="item-button" v-if="activeKey=='2'" style="margin-left: 14px">
                撤回
                <a-icon type="rollback" />
              </span>
            </div>
          </div>
        </div>
      </div>
      <a-pagination @change="loadData" style="text-align: right" v-model="ipagination.current"
                    :total="ipagination.total"
                    show-less-items/>
    </a-spin>
    <a-modal
      title="新建任务"
      :visible="visible"
      @ok="saveQuickStart"
      @cancel="closeQuickStart"
      :width="1000"
      :bodyStyle="{maxHeight: '500px', overflow: 'auto'}"
      :confirmLoading = "confirmLoading"
    >
      <a-input v-model="quickstart.title" placeholder="请输入标题"></a-input>
    </a-modal>

    <a-modal
      title="快速直接发布"
      :visible="visible1"
      @ok="saveQuickStart1"
      @cancel="closeQuickStart1"
      :width="1000"
      :bodyStyle="{maxHeight: '500px', overflow: 'auto'}"
      :confirmLoading = "confirmLoading"
    >
      <a-input v-model="quickstart.title" placeholder="请输入标题"></a-input>
    </a-modal>
    <preview-with-content-info v-if="showDetail" :visible.sync="showDetail"
                               :content-info="currentItem"></preview-with-content-info>
  </div>
</template>
<script>
//任务列表
import {JeecgListMixin} from '@/mixins/JeecgListMixin';
import {getAction, postAction} from "@/api/manage";
import PreviewWithContentInfo from "../../components/xinke/preview/PreviewWithContentInfo";

export default {
  name: "TaskList",
  mixins: [JeecgListMixin],
  components: {PreviewWithContentInfo},

  data() {
    return {
      defaultImg: require('@assets/default.png'),
      url: {
        list: 'task/taskInfo/queryTaskList'
      },
      activeKey: '1',
      columns: [
        {
          title: '标题',
          dataIndex: 'title',
          key: 'title'
        },
        {
          title: '修改人',
          dataIndex: 'createBy',
          key: 'createBy'
        },
        {
          title: '修改时间',
          dataIndex: 'createTime',
          key: 'createTime'
        },
        // {
        //   title: '操作',
        //   key: 'operation',
        //   scopedSlots: { customRender: 'operation' }
        // }
      ],
      titleChangeHistory: [],
      quickstart:{},
      delColumns: [
        {
          title: '标题',
          dataIndex: 'taskName',
          align: "center",
        },
        {
          title: '当前节点',
          dataIndex: 'childName',
          align: "center",
        },
        {
          title: '任务类型',
          dataIndex: 'taskType',
          align: "center",
          customRender(text, r, index) {
            return text === 0 ? '文章':'活动'
          }
        },
        {
          title: '任务编码',
          dataIndex: 'taskNo',
          align: "center",
        },
        {
          title: '作者',
          dataIndex: 'createBy',
          align: "center",
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          align: "center",
        },
      ],
      delDataSource: [],
      visible: false,
      visible1: false,
      showDetail: false,
      confirmLoading:false,
      currentItem: {},
      role:'',
    }
  },

  mounted(){
    this.getRole()
  },
  methods: {
    getTitleChangeHistory(taskNo) {
      getAction('content/conTitleRecord/queryContentTitleRecord', { taskNo: taskNo }).then(res => {
        if (res.success) {
          this.titleChangeHistory = res.result
        }
      }).catch(e => {
        console.error(e)
      })
    },
    handleAdd(){
      this.visible = true
    },
    handleAdd1(){
      this.visible1 = true
    },
    closeQuickStart(){
      this.quickstart.title = '';
      this.visible = false
    },
    closeQuickStart1(){
      this.quickstart.title = '';
      this.visible1 = false
    },
    saveQuickStart(){
      this.confirmLoading = true
      console.log(this.quickstart)
      let param = {}
      getAction('task/taskInfo/quickStart',this.quickstart).then(res => {
        param = res.result;
        this.$router.push({
          path: '/task/flow',
          query: {
            taskNo: param.task_no,
            childNodeId: param.child,
            taskType: param.task_type,
            isHistory: this.activeKey
          }
        })
        this.confirmLoading = false
        this.visible = false
      })
    },


    getRole(){
      getAction('task/taskInfo/getRole',{}).then(res => {
        this.role = res.result;
      })
    },

    saveQuickStart1(){
      this.confirmLoading = true
      console.log(this.quickstart)
      let param = {}
      getAction('task/taskInfo/quickStart1',this.quickstart).then(res => {
        param = res.result;
        this.$router.push({
          path: '/task/flow',
          query: {
            taskNo: param.task_no,
            childNodeId: param.child,
            taskType: param.task_type,
            isHistory: this.activeKey
          }
        })
        this.confirmLoading = false
      })
    },
    tabChange(key) {
      this.activeKey = key;
      if(key == '1'){
        this.url.list ='task/taskInfo/queryTaskList'
      }else if (key == '2'){
        this.url.list = 'task/taskInfo/queryHisTaskList'
      }else if (key == '3'){
        this.url.list = 'task/taskInfo/querySyncTaskList'
      }else if(key == '4'){
        this.url.list = 'task/taskInfo/queryFinishedTaskList'
      }else if(key == '5'){
        this.url.list = 'task/taskInfo/queryHisTaskList2'
      }
      this.searchReset()
    },
    //处理任务
    handleTask(item) {
      // this.$router.push({
      //   path: '/task/flow',
      //   query: {
      //     taskNo: item.taskNo,
      //     childNodeId: item.child,
      //     taskType: item.taskType,
      //     isHistory: this.activeKey === "3" ? "2": this.activeKey
      //   }
      // })

      var taskNo = item.taskNo;
      var childNodeId = item.child;
      var taskType = item.taskType;
      var isHistory = (this.activeKey === "3" || this.activeKey === "5")  ? "2" : this.activeKey;

      if(this.activeKey === '4' ){
        //打开内容信息
        console.log(item)
        this.currentItem.taskId = item.taskNo
        this.currentItem.contentType = '1'
        this.currentItem.contentIntroduce = item.contentName
        this.currentItem.content = item.content

        this.showDetail = true
      }else{

        // 构造查询字符串
        var queryString = `?taskNo=${encodeURIComponent(taskNo)}&childNodeId=${encodeURIComponent(childNodeId)}&taskType=${encodeURIComponent(taskType)}&isHistory=${encodeURIComponent(isHistory)}`;

        // 构造完整的URL
        var url = `/media-view-boss/task/flow${queryString}`;

        // 使用window.open打开新窗口
        window.open(url, '_blank');
      }

    },
    // 撤回任务
    backTask(item) {
      const params = item;
      getAction('task/taskInfo/taskRecall',params).then(res => {
        if (res.success) {
          this.$message.success('撤回成功');
          this.searchReset()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 删除任务
    deleteTask(item) {

    },
    // 打开回收站
    handleBin() {
      this.visible = true;
      // 用来测试展示的数据
      this.delDataSource = this.dataSource;
    },
    handleOk() {
      this.visible = false;
    }
  }
}
</script>

<style scoped lang="less">
.item {
  background-color: white;
  border-radius: 8px;
  padding: 20px 30px;
  margin: 10px 0;

  &-title {
    font-weight: 700;
    color: #333;
    font-size: 16px;
  }

  &-content {
    display: flex;
    font-size: 13px;
    align-items: center;

    &-title {
      font-size: 15px;
      line-height: 25px;
    }
  }

  &-content .ant-row {
    margin: 8px 0;
  }

  &-icon {
    width: 180px;
    height: 120px;
    border-radius: 5px;
    border: 1px solid #ededed;
    margin-right: 30px;
  }

  &-flex {
    display: flex;
  }

  &-label {
    width: 90px;
    color: #999;
  }

  &-value {
    flex: auto;
    color: #333;
  }

  &-button {
    background-color: #eaeffa;
    border-radius: 6px;
    line-height: 30px;
    color: #06f;
    text-align: center;
    margin-top: 3px;
    cursor: pointer;
    padding: 8px 10px;
  }
}

</style>